<template>
	<div class="contain">
		<p>染指流沙，回绕不尽的世界繁华；</p>
		<p>青灯孤伴，镌刻不完的午夜落花；</p>
		<p>锦帛残卷，撰写不到的城南旧事；</p>
		<p>蓦然回首，消逝不见的绝美年华。</p>
		<img v-lazy="'https://picsum.photos/450/300/?random=1'"/>
		<img v-lazy="'https://picsum.photos/450/300/?random=2'"/>
		<img v-lazy="'https://picsum.photos/450/300/?random=3'"/>
		<img v-lazy="'https://picsum.photos/450/300/?random=4'"/>
	</div>
</template>

<script>
    export default {
        name: "Contain"
    }
</script>

<style scoped>
	p{
		font-size: .15rem;
		color: #666666;
		padding-bottom: .2rem;
	}
	img {
		display: block;
		width: 100%;
		padding-bottom: .15rem;
		border-radius: .1rem;
	}
	img[lazy="loading"] ,img[lazy="error"] {
		margin: .3rem auto;
	}
	img[lazy="loading"] {
		width: 30%;
	}
	img[lazy="error"] {
		width: 80%;
	}
</style>
